<template>
	<view>
	<!-- 头部导航 -->
	  <uni-nav-bar background-color="#3286ed" :statusBar="true" :fixed='true' color="#fff" title="租赁订单结算单" left-icon="left" right-text="新增" @clickLeft="backFn"     @clickRight="addFn"></uni-nav-bar>
	  
	  <view class="">
	  	<view style="position: fixed;z-index: 100;width:100%;">
	  		<uni-row class="demo-uni-row">
	  			<uni-col :span="10">
	  				<zb-dropdown-menu  style="width: 100%" z-index="12">
	  				  <zb-dropdown-item v-model="formData.contractTemplate"  :options="options" @change="changeFn" ></zb-dropdown-item>
	  				</zb-dropdown-menu>
	  			</uni-col>
	  			<uni-col :span="1">
	  				<view class="title"  style="color:#c3c3c3">|</view>
	  			</uni-col>
	  			<uni-col :span="6">
	  				<view @click="openP" class="title">筛选</view>
	  			</uni-col>
	  			<uni-col :span="1">
	  				<view class="title"  style="color:#c3c3c3">|</view>
	  			</uni-col>
	  			<uni-col :span="6">
	  				<view class="title">
	  					<uni-icons  type="search" size="24" color="#c3c3c3"></uni-icons>
	  				</view>
	  			</uni-col>
	  		</uni-row>
	  	</view>
	  	<view style="width:100%;height: 88rpx;display: block"></view>
	  </view>
	  <!-- 列表展示 -->
	  <u-swipe-action  :autoClose='true' >
		  <view  class="application" v-for="item in list" :key="item.id">
			   <u-swipe-action-item :disabled="disabledShow"  :options="options1" @click="delBtn" :name="item.id">
				   <view @click="toapplicationInfo(item.id)">
					  <view class="application_one">{{item.number}}</view>
					  <view class="desc">客户名：{{item.customerName}}</view>
					  <view class="desc">签订人：{{item.signRenName}}</view>
							<view class="desc">结算申请日期：{{item.applyDate}}</view>
					  <view class="desc">
						<view>
							<span>状态：</span>
							<span v-if="item.status==1">正常</span>
							<span v-if="item.status==2">完结</span>
						</view>
					  </view>
				   </view>
			   </u-swipe-action-item>
		  		 
		  </view>	
	  </u-swipe-action>
	  <view v-if="list.length ==0 " class="BGC"></view>
	  
	  <!-- 消息提示 -->
	  <u-toast ref="uToast"></u-toast>
	  <!-- 筛选弹框 -->
	  	<u-popup :closeable="true"  :show="show" customStyle="margin-top:44px;padding-left:10px" overlayStyle="margin-top:44px"  mode="right" :closeOnClickOverlay="true"  @close="show=false"  >
	  				<view style="width: 100%;height: 50px;line-height: 50px;font-size: 20px;color: #fd9540;">
	  					筛选
	  				</view>
					<u--form :model="formData" labelWidth="100px" >
	  					<u-form-item borderBottom label="对账单编号" prop="number" >
	  						<u--input  v-model="formData.number"   border="none" placeholder='请输入对账单编号'></u--input>	 
	  					</u-form-item>
	  						<u-form-item borderBottom label="客户名称" prop="customerName"  >
	  							<u--input v-model="formData.customerName"  border="none" placeholder='请输入客户名称'></u--input>
	  						</u-form-item>
	  							<u-form-item borderBottom label="租赁订单编号" prop="orderNo" >
	  								<u--input v-model="formData.orderNo"   border="none" placeholder='请输入租赁订单编号'></u--input>	 
	  							</u-form-item>
	  					<u-button text="查询" style="width: 100px;height: 30px;" size="mini" type="success" @click="Seacrch"></u-button>
	  				</u--form>
	  			</u-popup>
	</view>
</template>

<script>
	import {getFinalStatementListApi,delFinalStatementApi,getFinalStatementInfoApi,addStatementApi,editFinalStatementApi} from '@/api/finnalStatement.js'
	import {getDicts} from '@/api/dictionary/index.js'
	export default {
		data() {
			return {
				disabledShow:true,//右滑删除得
				permissions:[],//按钮权限
				list:[],
				options:[
					{text:'全部',value:''},
					
				] ,
				formData:{
					pageSize:10,
					pageNum:1,
					contractTemplate:'',
					number:'',
					customerName:'',
					orderNo:''
				},
				total:0,
				options1:[{
					 text: '删除'
				}],
				show:false
			};
		},
		onLoad() {
			this.permissions=this.$store.getters.permissions
			
			this.initData()
			this.getContractTemplate()
			// 控制删除按钮权限出现
			if(this.permissions.includes('*:*:*') ||this.permissions.includes('module:statement:remove')){
			     this.disabledShow=false
			}
		},
		// 上划
		onReachBottom() {
			 if(this.formData.pageSize*this.formData.pageNum<this.total){
				 this.formData.pageNum++
				 let res=listOrder(this.formData).then(reponse=>{
				 			 this.list.push(...reponse.rows)
							  console.log(this.list);
				 })
				
				 
			 }else{
				 console.log('已经加载完毕');
			 }
		},
		// 下拉
		async onPullDownRefresh() {
			this.list=[]
			this.formData={
				pageSize:10,
				pageNum:1,
				contractTemplate:'',
				number:'',
				customerName:'',
				orderNo:''
			},
			await this.initData()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},3000)
		},
		methods:{
			
			openP(){
				this.show=true
			},
			async Seacrch(){
				this.show=false
				let res=await getFinalStatementListApi(this.formData)
				this.list=res.rows
				
			},
			async initData(){
				let res=await getFinalStatementListApi(this.formData)
				this.list=res.rows
				this.total=res.total
			},
			// 获取合同模板
			getContractTemplate(){
				let newArr=[]
				getDicts('biz_contract_template').then(res=>{
					newArr=res.data.map((item)=>{
						return {text:item.dictLabel,value:item.dictValue}
					})
					this.options=this.options.concat(newArr)
				})
			},
			// 返回上一级
			backFn(){
				 uni.navigateBack({delta:1})
			},
			addFn(){
				if(this.permissions.includes('*:*:*')  || this.permissions.includes('module:statement:add')){
				  uni.navigateTo({
				  	url:'/pages/finnalStatement/addfinnalstatement/addfinnalstatement'
				  })
				}else{
					this.$refs.uToast.show({
					   type:'default',
					   message:'您没有权限新增结算单！'
					})
				}
				
			},
			// 删除
			async delBtn(e){
				await delFinalStatementApi(e.name)
				this.$refs.uToast.show({
					message:'删除成功！',
				})
				this.initData()
			},
			changeFn(e){
				console.log(e);
				this.formData.contractTemplate=e.value
				this.initData()
			},
			// 详情
			toapplicationInfo(item){
			  uni.navigateTo({
			  	url:'/pages/finnalStatement/details/index?id='+item
			  })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.BGC{
		width: 100%;
		min-height: 400px;
		background-image: url('@/static/images/bgc.png');
		background-size:100% 200px;
		background-repeat: no-repeat;
			margin: 200px 0;
	}
	// 下拉选择框
	.demo-uni-row {
		margin-bottom: 10px;
			// position: fixed;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
			
			.title{
				height:48px;
				line-height: 48px;
				background-color: #ffffff;
				text-align: center;
				font-size: 16px;
			}
	}
.application{
		  position: relative;
		  min-height: 50px;
		  padding: 10px;
		  margin: 10px 5px;
		  background-color: #fff;
		  border: solid 1px #c3c3c3;
		  .application_one{
			  font-size: 16px;
			  font-weight: 600;
			  padding-bottom: 8px;
		  }
		  .desc{
			  font-size: 12px;
			  color:#8c8b8a;
		  }
		  .addapplicaionChild{
			  position: absolute;
			  right: 20px;
			  bottom: 20px;
			  font-size: 5px;
			  color: #fd9540;
		  }
		  
	  }
</style>
